<template>
	<view class="login" :style="'padding-top:'+barHeight+'px'">
		<view class="back">
			<u-icon @click="back" name="arrow-left" size="28"></u-icon>
			<!-- #ifdef APP -->
			<view @click.stop="forgetThePassword">忘记密码</view>
			<!-- #endif -->
		</view>
		
		<view class="logo2">
			<image src="../../static/login.png" class="icon" mode=""></image>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view class="mobile">
			<input v-model="mobile" type="number" placeholder="请输入手机号">
		</view>
		<view class="mobile">
			<input password v-model="password" type="safe-password" placeholder="请输入密码">
		</view>
		<view class="btn2" @click="passwordLogin">登 录</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- <button open-type="getPhoneNumber" class="btn" @getphonenumber="getPhoneNumber">手机号快捷登录</button> -->
		<view class="phone-box">
			<button class="btn" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber">
				手机号快捷登录
			</button>
			<view class="dialog" v-if="!select" @click="beforeRead"></view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view class="btn" @click="login">微信登录</view>
		<!-- #endif -->

		<!-- 抖音 -->
		<!-- #ifdef MP-TOUTIAO -->

		<!-- 手机验证码登录 -->
		<view class="logins">
			<view class="line">
				<view class="mo">
					手机号
				</view>
				<input class="inputs" type="text" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="line">
				<view class="mo">
					验证码
				</view>
				<view class="codes">
					<input type="text" class="inmol" placeholder="请输入验证码" v-model="code" />
					<view class="code" @click="getCode">{{word}}</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="logina">登 录</view>
		<!-- #endif -->
		
		
		<view class="agree">
			<view class="circle">
				<image v-if="select" @click="select = !select" class="select" src="https://www.stck.cc/my/selecta.png" mode="">
				</image>
				<image v-else @click="select = !select" class="select" src="https://www.stck.cc/my/noselect.png" mode="">
				</image>
			</view>
			<view class="other">已阅读并同意</view>
			<view class="rule" @click="detail(7,'服务协议')">《服务协议》</view>
			<view class="other">与</view>
			<view class="rule" @click="detail(3,'隐私政策')">《隐私政策》</view>
		</view>
		
		<u-popup :show="show" mode="bottom" :closeable="true"  @close="onClose">
		  <view style="font-size: 30rpx;font-weight:bold;margin: 32rpx;">完善个人信息</view>
		  <view style="margin: 0 32rpx 0 32rpx;padding: 8rpx 32rpx 8rpx 32rpx;border-radius: 20rpx;" class="info-box">
		    <view style="margin: 24rpx 0 24rpx 0;padding: 12rpx 0 12rpx 0;display: flex;align-items: center;" class="avatar-box">
		      <!-- <view class="z-font-22 text_666 z-margin-r-32">头像</view> -->
		      <view class="z-font-22" style="font-size: 22rpx;color: #666;margin-right: 32rpx;" @chooseavatar="onChooseAvatar">点击设置头像</view>
		      <!-- <view class="z-flex-1"></view> -->
		      <button class="z-absolute" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="avatar" :src="oss(avatarUrl)"></image>
			  </button>
		    </view>
		    <view class="avatar-box" style="margin: 24rpx 0 24rpx 0;display: flex;align-items: center;">
		      <view class="z-font-22" style="font-size: 22rpx;color: #666;margin-right: 32rpx;">昵称</view>
		      <input type="nickname" style="font-size: 28rpx;" class="" v-model="nickname"  placeholder="点击设置昵称"/>
		    </view>
		  </view>
		  <view style="padding: 32rpx;" :style="'padding-bottom:' + safeBottom">
		      <view class="z-btn" @tap="saveInfo">保存</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				finish: true,
				barHeight: '',
				select: false,
				codes: '',
				mobile: '',
				code: '',
				word: '获取验证码',
				password:'',
				show:false,
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickname: '',
			};
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight;
			// #ifdef MP-WEIXIN
			this.getWxCode()
			// #endif
		},
		methods: {
			beforeRead(){
				uni.$u.toast('请阅读并勾选同意协议！');
			},
			onClose() {
			  this.show = false
			  uni.reLaunch({
			    url: '/pages/index/index'
			  })
			},
			saveInfo() {
				console.log(this.avatarUrl,this.nickname,'!!!!!!!!???111')
			  uni.$u.http.post('/updateuserinfo', {
			    avatar: this.avatarUrl,
			    nickname: this.nickname,
			  }).then(res => {
			    this.show = false
				uni.$u.toast(res.msg);
			    uni.reLaunch({
			      url: '/pages/index/index'
			    })
			  })
			},
			onChooseAvatar(e) {
				console.log(e,'........')
				this.uploadFilePromise(e.detail.avatarUrl)
			 },
			uploadFilePromise(url) {
				uni.uploadFile({
					url: this.Upload.uploadurl,
					filePath:url,
					name: 'file',
					formData: {
						type: 'image',
						token: uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data),'???')
						console.log('返回返回', JSON.parse(uploadFileRes.data).data);
						this.avatarUrl = this.oss(JSON.parse(uploadFileRes.data).data.url)
					}
				});
			}, 
			 
			
			getPhoneNumber(e) {
				console.log(e,11111111112222)
				uni.$u.http.post('/userlogin', {
					code: this.codes,
					encryptedData: e.detail.encryptedData,
					iv: encodeURIComponent(e.detail.iv),
				}).then(res => {
					uni.setStorageSync('token', res.data.user
						.token);
					uni.setStorageSync('userinfo', res.data
						.user);
						//首次登录 没有头像昵称
						if(!res.data.user.avatar) {
							this.show = true
						}else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
				}).catch((res) => {
				
				})
			},
			forgetThePassword(){
				uni.navigateTo({
					url:'/pages/auth/forgetThePassword'
				})
			},
			logina() {
				if (!this.select) {
					uni.$u.toast('请先同意《服务协议》和《隐私政策》');
					return
				}

				if (!this.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}

				if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				
				if (!this.code) {
					uni.$u.toast('请输入验证码');
					return
				}

				uni.$u.http.post('/mobilelogin', {
					mobile: this.mobile,
					captcha: this.code
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo
							.token);
						uni.setStorageSync('userinfo', res.data
							.userinfo);

						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}).catch((res) => {

				})
			},
			// 获取验证码
			getCode() {
				console.log(222)
				if (this.finish) {
					if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
						uni.$u.toast('请输入正确的手机号');
						return;
					}
					this.finish = false
					this.num = 60
					this.word = `${this.num}秒后重新发送`
					this.change()

					uni.$u.http.post('/send', {
						mobile: this.mobile,
						event: 'mobilelogin'
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast('已发送');
						}
					}).catch((res) => {

					})
				} else {
					uni.$u.toast('请稍后重试');
				}

			},
			change() {
				setTimeout(() => {
					this.num--;
					if (this.num === 0) {
						this.finish = true
						this.word = '获取验证码'
					} else {
						this.word = `${this.num}秒后重新发送`
						this.change()
					}
				}, 1000)
			},
			se() {
				console.log(111)
			},
			pay() {
				uni.$u.http.post('/cs', ).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							orderInfo: {
								order_id: res.data.data.order_id,
								order_token: res.data.data.order_token
							},
							service: 5,
							getOrderStatus: e => {
								console.log(e)
							},
							success: response => {
								if (response.code == 0) {
									console.log()
									//抖音订阅模板
									// tt.requestSubscribeMessage({
									// 	tmplIds: [
									// 		'MSG11886451bef72279e17bf95939130ba90cb00ea14497'
									// 	],
									// 	success: () => {}
									// })
								}
							},
							fail: (e) => {
								console.log(e)
								this.toast('充值失败');
							}
						})

					}
				}).catch((res) => {

				})
			},
			getWxCode() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes)
						_this.codes = loginRes.code;
					},
					fail: (e) => {
						console.log(e)
					}
				});
			},
			detail(type, title) {
				uni.$u.route({
					url: 'pages/my/setting/article',
					params: {
						type: type,
						title
					}
				})
			},
			passwordLogin(){
				if (!this.select) {
					uni.$u.toast('请先同意《服务协议》和《隐私政策》');
					return
				}
				
				if (!this.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				
				if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				
				if (!this.password) {
					uni.$u.toast('请输入密码');
					return
				}
				
				uni.$u.http.post('/login',{
					account:this.mobile,
					password:this.password
				}).then(res => {
					console.log(res,'.........,,,,,')
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('userinfo', res.data.userinfo);
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}).catch((res) => {})
			},
			login() {
				if (!this.select) {
					uni.$u.toast('请先同意《服务协议》和《隐私政策》');
					return
				}
				// uni.showLoading({
				// 	title: '登录中'
				// });

				// #ifdef MP-WEIXIN
				let that = this
				uni.$u.http.post('/third', {
					code: that.codes,
					platform: 'mp_weixin'
				}).then(res => {
					if (res.data.binding === 0) {
						uni.setStorageSync('binding',1);
						uni.setStorageSync('token', res.data.user
							.token);
						uni.setStorageSync('userinfo', res.data
							.user);
						// #ifdef MP
						uni.$u.route({
							url: `/pages/auth/bind?platform=mp_weixin`
						})
						// #endif

					} else {
						uni.setStorageSync('token', res.data.user
							.token);
						uni.setStorageSync('userinfo', res.data
							.user);
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}).catch((res) => {
					uni.hideLoading();
					that.code = ''
					that.getWxCode()
					console.log(res)
					console.log(888)

				})
				
				// #endif
				// #ifdef APP
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log(loginRes)
						// return
						if (loginRes) {
							uni.$u.http.post('/wechatlogin', {
								code: loginRes.code
							}).then(res => {
								console.log(res)
								if (res.code == 1) {
									uni.setStorageSync('token', res.data.userinfo
										.token);
									uni.setStorageSync('userinfo', res.data
										.userinfo);

									if (res.data.binding === 0) {
										// #ifdef MP
										uni.$u.route({
											url: `/pages/auth/bind?platform=mp_weixin`
										})
										// #endif
										// #ifdef APP-PLUS
										uni.$u.route({
											url: `/pages/auth/bind?platform=app_weixin`
										})
										// #endif

									} else {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}

								}
							}).catch((res) => {

							})

						}
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		// background: linear-gradient(to bottom, #FFC141, #F6F6F6, #F6F6F6);
		// background-size: 750rpx 500rpx;
		background-repeat: no-repeat;
		padding-top: 50rpx;
		position: relative;
		box-sizing: border-box;

		.back {
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}

		.logo {
			padding-top: 200rpx;
			text-align: center;

			.icon {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}
		}
		.logo2 {
			padding-top: 200rpx;
			text-align: center;
		
			.icon {
				width: 527rpx;
				height: 147rpx;
				border-radius: 20rpx;
			}
		}
		
		.mobile {
			// width: 622rpx;
			// line-height: 120rpx;
			// display: flex;
			// align-items: center;
			width: 526rpx;
			height: 120rpx;
			background: #F6F6F6;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			margin: auto;
			margin-top: 40rpx;
			// border-bottom: 1rpx solid #DFDFDF;
			
			input {
				padding: 0 20rpx;
			}
		}

		.logins {
			width: 670rpx;
			margin: auto;
			margin-top: 40rpx;

			.line {
				height: 100rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px solid #F6F6F6;

				.mo {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-right: 20rpx;
					width: 120rpx;
				}

				.inputs {
					border: 2rpx solid #DCDCDC;
					border-radius: 45rpx;
					background-color: #F5F5F5;
					padding: 15rpx 30rpx;
					width: 500rpx;
					box-sizing: border-box;
					height: 80rpx;
				}

				.codes {
					display: flex;
					align-items: center;
					flex-direction: row;
					border: 2rpx solid #DCDCDC;
					background-color: #F5F5F5;
					border-radius: 45rpx;
					padding: 15rpx 40rpx;
					box-sizing: border-box;
					width: 500rpx;

					.inmol {
						flex: 1;
					}

					.code {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #437DE9;
					}
				}

			}
		}

		.agree {
			display: flex;
			// align-items: center;
			// justify-content: center;
			// padding: 30rpx 20rpx 20rpx;
			// position: absolute;
			// left: 0;
			// width: 100%;
			// bottom: 100rpx;
			// box-sizing: border-box;
			justify-content: center;
			padding-top: 30rpx;

			.circle {
				// width: 30rpx;
				// height: 30rpx;
				// box-sizing: border-box;
				// border-radius: 50%;
				// border: 1px solid #999999;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;


				.select {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.select {
				width: 22rpx;
				height: 22rpx;
			}

			.other {
				font-size: 22rpx;
				color: #999999;
			}

			.rule {
				font-size: 22rpx;
				color: #FF8007;
			}
		}

		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 200rpx auto 0;
			width: 590rpx;
			border-radius: 44rpx;
		}
		.btn2 {
			// background: linear-gradient(to right, #FFDF41, #FFC141);
			// height: 88rpx;
			// border: 44rpx;
			width: 606rpx;
			height: 98rpx;
			background: #FEBF4E;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx auto 0;
			// width: 590rpx;
			border-radius: 44rpx;
		}
		.btn3 {
			width: 606rpx;
			height: 98rpx;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			opacity: 1;
			border: 1rpx solid #F0F0F0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx auto 0;
			border-radius: 44rpx;
		}
		
		.phone-box{
			position: relative;
		}
		.dialog{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
	
	
	.info-box{
	  background-color: #F5F7F9;
	}
	
	.avatar-box{
	  position: relative;
	  
	  .z-absolute {
		   padding: 0;
		   margin: 0;
	  }
	}
	
	
	.avatar{
		display: block;
	    width: 68rpx;
	    height: 68rpx;
	}
	
	.z-btn{
	  background: #FFBC45;
	  color: #fff;
	  border-radius: 10rpx;
	  height: 98rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
</style>
